<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery点击伸缩效果input搜索框</title>
<script src="./jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	//focusblurmenu
	jQuery.focusblurmenu = function(focusdom,focuswidthnew,animatetime) {
		var focusblurmenuid = $(focusdom);
		var defval = focusblurmenuid.val();
		var defwidth = focusblurmenuid.width();
		focusblurmenuid.focus(function(){
			var thisval = $(this).val();
			if(thisval==defval){
				$(this).val("");
				$(this).animate({width:"+"+focuswidthnew}, focuswidthnew).addClass("searchkeyfocus");
			}
		});
		focusblurmenuid.blur(function(){
			var thisval = $(this).val();
			if(thisval==""){
				$(this).val(defval);
			}
			$(this).animate({width:"+"+defwidth}, focuswidthnew).removeClass("searchkeyfocus");
		});
		
	};
	$.focusblurmenu("#searchkey","240px","300");
});
</script>
<style>
.focusblurmenu{width:600px; margin:0 auto; overflow:hidden; padding:0px;}
.focusblurmenu input{ float:right; padding:0px;}
.focusblurmenu .searchkey{width:80px; height:24px; line-height:24px; padding-left:4px; padding-right:4px; border:#CCC solid 1px; background-color:transparent;}
.focusblurmenu .searchkeyfocus{ border:#F00 solid 1px;}
.focusblurmenu .searchbtn{ padding-left:6px; padding-right:6px; cursor:pointer; background-color:#666; border:#CCC solid 1px; background-color:transparent;height:26px; line-height:26px; margin-left:4px;}
</style>
</head>

<body>
<form action="" method="post" style="" class="focusblurmenu">
<input name="" type="submit" value="搜索" id="searchbtn" class="searchbtn">
<input name="" type="text" value="输入关键词" id="searchkey" class="searchkey" style="width: 80px;">
</form>

<div style="width:960px;padding-top:100px; margin:0 auto">
<p>调用说明：$.focusblurmenu("#searchkey","300px","300"); 依次是$.focusblurmenu("input的ID","展开的宽度","自定义动画的时间");</p>
<p>我在代码狂人看到他的网站搜索框是这个点击伸缩效果input搜索框css3代码，看着还挺好玩，
很明显他根本就不兼容IE6、7、8，css3是个趋势不过想在中国普及那是N年后的事情了，目前要用这个帅帅的效果还得使用NX的jquery特效。</p>
<p>下面我们动手来制作这个效果，用脚趾头想一想，这个效果不需要重写，借用一下<a href="http://www.51xuediannao.com/js/jquery/jquery_focusblur.html" target="_blank">input失去焦点和获得焦点jquery焦点事件插件</a>
稍作改造就OK了。
</p>
<p>把input失去焦点和获得焦点jquery焦点事件插件的代码复制过来，插件名字改一下focusblurmenu。呵呵，添加一个jquery自定义动画$(this).animate({width:'+250px'}, "300").addClass("searchkeyblur");</p>
<p>input搜索框获得焦点样式由 类.searchkeyfocus 来控制，虽然css3有控制获得焦点样式，考虑兼容性此处不采用，css3的东西要学习要知道，但不一定要用。</p>
<p>jquery点击伸缩效果input搜索框的css样式基本写的比较丑陋一点点，不过里面一些必须的css样式已经写出来了，你要做的是在粉饰一下就很OK。</p>
</div>





</body></html>